<template>
	<!-- 	<view v-if="isMinimized" class="circle-button" @click="isMinimized = false">
		<SafeImage class="playing-icon" :class="{ rotating: playerStore.status === MediaStatus.playing }" :src="playerStore.icyData?.cover || playerStore.currentRadio?.favicon" mode="aspectFill" />
	</view> -->

	<!-- 	<view class="player-bar">
		<view class="controls">
			<uni-icons fontFamily="iconfont" size="24" color="#B829F7" :prop="playerStore.status">{{ playState }}</uni-icons>
			<uni-icons fontFamily="iconfont" size="24" color="#B829F7" @click="isMinimized = true">{{icons.minimize}}</uni-icons>
		</view>
	</view> -->

	<view class="player-bar" @click="showFull()">
		<SafeImage class="playing-icon" :class="{ 'cover-animate-rotating': playerStore.status === MediaStatus.playing }" :src="playerStore.icyData?.cover || playerStore.currentRadio?.favicon" mode="aspectFill" />
		<!-- 标题内容 -->
		<view class="playing-info"><text class="playing-name">{{ playerStore.currentRadio?.name }}</text></view>
		<!-- 操作区 -->
		<view class="player-controls">
			<uni-icons fontFamily="iconfont" size="40" color="#B829F7" :prop="playerStore.status">
				{{ icons.prevSong }}
			</uni-icons>
			<!-- 播放/暂停/加载状态 -->
			<uni-icons fontFamily="iconfont" size="40" color="#B829F7" @click="togglePlay" :prop="playerStore.status">
				{{ playState }}
			</uni-icons>
			<uni-icons fontFamily="iconfont" size="40" color="#B829F7" :prop="playerStore.status">
				{{ icons.nextSong }}
			</uni-icons>
			<uni-icons fontFamily="iconfont" size="24" color="#B829F7" @click="isMinimized = true">{{icons.minimize}}</uni-icons>
		</view>

	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { icons, MediaStatus } from '@/common/const';
	import { usePlayerStore } from '@/stores/usePlayerStore';
	const playerStore = usePlayerStore();
	const playState = computed(() => {
		return playerStore.status === MediaStatus.playing ? icons.pause : icons.play;
	});
	const isMinimized = ref(true)
	const isPlaying = ref(false)
	const title = ref('当前播放标题示例')

	const playIcon = '/static/play.svg'
	const pauseIcon = '/static/pause.svg'

	const togglePlay = () => {
		isPlaying.value = !isPlaying.value
	}
</script>

<style scoped>
	.player-bar {
		width: 100%;
		background: linear-gradient(135deg, #0B0B2B 0%, #1A1A4B 100%);
		border-radius: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
		padding: 20rpx 30rpx;
		display: flex;
	}

	.playing-icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		object-fit: cover;
	}

	.playing-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.playing-name {
		font-size: 14px;
		color: #fff;
		margin-bottom: 4rpx;
	}

	/* 最小化圆形按钮样式 */
	.circle-button {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
		/* 关键！用于定位内部图层 */
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.cover-animate-rotating {
		animation: spin 2s linear infinite;
	}
</style>